<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能停车场管理系统-注册页面</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
			
            background-color: white; /* Lighter blue background to match blue theme */
            overflow-x: hidden; /* Prevent horizontal scrolling */
        }
        .container {
            width: 90%; /* Adjust the width to keep spacing on both sides */
            max-width: 600px; /* Set a maximum width for the container */
            margin: auto;
            text-align: center;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%; /* Full width of the container */
			
            background-color:#007bff; /* White background for header */
            padding: 15px 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: fixed; /* Fix the header at the top */
            top: 0;
            left: 0;
            z-index: 1000; /* Ensure the header is above other content */
        }
        .header img {
            height: 150px; /* Adjust the height to make the logo larger */
        }
        .header .welcome {
            margin-left: 10px; /* Add spacing on the left side of text elements */
            font-size: 3.5em; /* Increase font size for "欢迎注册！" */
            color: white; /* Blue text for welcome message */
            font-family: '宋体', sans-serif; /* Set font to Microsoft YaHei */
			font-weight: bold; /* 加粗 */
        }
        .header .login-link {
            margin-right: 10px; /* Add spacing on the right side of text elements */
            font-size: 1.0em;
            color: white; /* Blue text for "已有帐号？点击登录！" to match theme */
            font-family: 'Microsoft YaHei', sans-serif; /* Set font to Microsoft YaHei */
            text-decoration: none;
            position: static; /* Remove absolute positioning */
        }
        .header .login-link:hover {
            color: #00008b; /* Darker blue text on hover for "点击登录" */
            text-decoration: underline;
        }
        .content {
            margin-top: 80px; /* Add margin to push content below the fixed header */
            padding: 20px;
            background-color: #ffffff; /* White background for content */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: left; /* Align text to the left inside the content area */
        }
        .form-group {
            margin-bottom: 20px; /* Increase spacing between form groups */
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #000000; /* Black text for labels */
            font-size: 1.2em; /* Increase font size for labels */
        }
        .form-group input {
            width: calc(100% - 24px); /* Subtract padding only (assuming no border or adjust as needed) from width for better fit */
            padding: 12px 12px; /* Increase padding for larger input fields */
            box-sizing: border-box;
            border: none; /* Remove border */
            border-radius: 5px; /* Optional: Add rounded corners */
            background-color: #f9f9f9; /* Light gray background for inputs */
            font-size: 1.2em; /* Increase font size for input fields */
        }
        .register-btn {
            width: calc(100% - 44px); /* Subtract padding and border-width*2 from width for better fit */
            padding: 12px 22px; /* Increase padding for larger button */
            background-color: #007bff; /* Blue background for register button to match theme */
            color: #ffffff; /* White text for register button */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.2em; /* Set font size for button */
        }
        .register-btn:hover {
            background-color: #007bff; /* Darker blue on hover */
        }
        .success-message {
            margin-top: 20px;
            color: #007bff; /* Green text for success message */
            font-weight: bold;
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" class="container">

        <div class="header">
            <div style="display: flex; align-items: center;">
                <img src="images/logo2.png" alt="Logo">
                <div class="welcome">智能停车场管理系统欢迎注册！</div>
            </div>
            <a href="login.html" class="login-link" style="margin-right: 20px;">已有帐号？点击登录！</a>
        </div>
        <div class="content">
            <form id="registerForm">
                <div class="form-group">
                    <label for="username">用户账号</label>
                    <input type="text" id="username" v-model="account" name="username" @blur="dologinAccountCheck()" minlength="5" maxlength="20" required pattern="[a-zA-Z0-9_]{1,20}" oninput="validateInput(this)">
                    <br />
					<label :style="{color:TipsColor}">{{checkTips}}</label>
					
                </div>
                <div class="form-group">
                    <label for="password">用户密码</label>
                    <input type="password" id="password" v-model="pwd" name="password" minlength="5" maxlength="32" required pattern="[a-zA-Z0-9!@#$%^&*()_+=-]{1,32}" oninput="validateInput(this)">
                    <small style="color:red;" id="passwordError"></small>
                </div>
                <div class="form-group">
                    <label for="phone">用户手机号码</label>
                    <input type="text" id="phone" name="phone" v-model="tel" maxlength="11" required pattern="\d{11}" oninput="validateInput(this)">
                    <small style="color:red;" id="phoneError"></small>
                </div>
                <button type="button" @click="doregistSubmit" class="register-btn" onclick="registerUser()">点击注册</button>
                <div class="success-message" id="successMessage">注册成功！</div>
            </form>
        </div>
    </div>
	<script src="layui/layui.js" type="text/javascript"></script>
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el:"#app",
			data:{
			account:"",
			pwd:"",
			tel:"",
			checkTips:"",
			TipsColor:""
			},
			methods:{
				dologinAccountCheck(){
					//1.获取账号输入框中用户输入的登陆账号:①在data中定义一个变量存储登陆账号②在登陆账号输入框添加v-model，属性值为data{变量}
					//2.响后端UserController控制器中的check接口方法发送请求，并将account传递给后端接口
					let url="http://localhost:8080/user/check";
					let params={account:this.account}
					//$.get(url,params,function(){},);
					$.get(url,params,res=>{
						//输出验证结果
						//console.log(res);
						//从res中获取提示信息，赋值给checkTips变量
						this.checkTips=res.msg;
						if(res.code==500){
							this.TipsColor="red";
						}else{
							this.TipsColor="green"
						}
					},"JSON");
				},
				doregistSubmit(){
					let url="http://localhost:8080/user/register";
					let params={
						userAccount:this.account,
						userPassword:this.pwd,
						userTel:this.tel,
					};
					$.get(url,params,res=>{
						if(res.code==200){
							window.location.href="login.html";
						}else{
							alert(res.msg);
						}
					},"JSON");
				}
			}
		});
	</script>
	<script>
	        function validateInput(input) {
	            // 这里可以添加输入验证逻辑，但在这个例子中我们保持简单
	            var errorElement = document.getElementById(input.id + 'Error');
	            errorElement.textContent = ''; // 清空错误信息
	        }
	 
	        function registerUser() {
	            // 在这里可以添加实际的注册逻辑，比如发送请求到服务器
	            // 但在这个示例中，我们直接显示成功消息
	 
	            // 假设所有输入都通过了验证
	            var successMessage = document.getElementById('successMessage');
	            successMessage.style.display = 'block'; // 显示成功消息
	 
	            // 可选：清空表单或执行其他操作
	            // document.getElementById('registerForm').reset();
	        }
	    </script>
</body>
</html>